<template>
	<view class="flex">
		<scroll-view :style="{height:wh+'px'}" scroll-y style="width: 120px;" :show-scrollbar="false">
			<view :class="selectActive===index?'active':''" class="text-center" v-for="(item,index) in cateList"
				:key="index" @click="scrollChange(index)"
				style="line-height: 88rpx;background-color: #f7f7f7;font-size: 12px;">
				{{item.name}}
			</view>
		</scroll-view>

		<scroll-view :style="{height:wh+'px',}" scroll-y class="bg-white" :scroll-top="scrollTop"
			:show-scrollbar="false">
			<view v-for="(item2,index2) in cateLevel2.leftCategories
" :key="index2" class="py-1 pl-2 font-weight-bold" style="font-size: 14px;">
				{{item2.name}}
				<view class="flex flex-wrap my-2">
					<view v-for="(item3,index3) in item2.threeCategories
" class="flex flex-column align-center mb-2" style="width: 33.33%;" @click="gotoGoodList(item3._id)">

						<image :src="item3.icurl" mode="" style="width: 60px;height: 60px"></image>
						<text class="font-weight-normal font-small ">{{item3.name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onShow
	} from "@dcloudio/uni-app"

	import {
		useCartStore
	} from "../../store";

	const cartStore = useCartStore()

	onShow(() => {
		uni.setTabBarBadge({
			index: 2,
			text: cartStore.total + ''
		})
	})

	const scrollTop = ref(0)
	const cateList = ref([])
	const cateLevel2 = ref({})
	const selectActive = ref(0)
	const wh = ref()
	const sysInfo = uni.getSystemInfoSync()
	wh.value = sysInfo.windowHeight

	const scrollChange = (index) => {
		selectActive.value = index
		cateLevel2.value = cateList.value[index]._id
		scrollTop.value = scrollTop.value === 0 ? 1 : 0
	}
	const getData = async () => {
		const cate = uniCloud.importObject("cate")
		const cateData = await cate.cate()
		const {
			data: {
				message
			}
		} = await uni.request({
			method: 'GET',
			url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories'
		})
		cateList.value = cateData
		cateLevel2.value = cateData[0]._id
	}

	const gotoGoodList = (cid) => {
		uni.navigateTo({
			url: "/subpkg/goods_list/goods_list?cid=" + cid
		})
	}

	getData()
</script>

<style>
	.active {
		background-color: #FFF !important;
		position: relative;
	}

	.active::before {
		content: ' ';
		display: block;
		width: 3px;
		height: 30px;
		background-color: #c00000;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
</style>